<html lang="en" class=" ">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>极返</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
    <link rel="stylesheet" href="./css/product.css" />
    <!-- 引入rem自适应类库 -->
    <script src="./js/flexible.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.1/clipboard.js"></script>
</head>

<body>
    <div id="productList" v-cloak>
        <div class="head-wrap">
            <van-nav-bar left-arrow>
                <form action="/" slot="title">
                    <van-search slot="title" v-model="keywords" placeholder="请输入搜索关键词" @search="onSearch">
                    </van-search>
                </form>
                <div slot="right" @click="onSearch">搜索</div>
            </van-nav-bar>

            <div class="product-screen">
                <div class="van-hairline--bottom">
                    <van-row type="flex" justify="space-between" class="nav-screen">
                        <van-col class="active">
                            <div @click="screenShow = !screenShow">
                                全部 <i class="van-icon" :class="[screenShow ? 'icon-up' : 'icon-down']"></i>
                            </div>
                        </van-col>
                        <van-col v-for="(item, index) in navScreen" :key="index" :class="{active:index==isNavActive}">
                            <div @click="onNavScreen(item.value)">{{item.label}}</div>
                        </van-col>
                    </van-row>
                </div>
                
                <transition name="fade">
                    <div class="screen-list" v-if="screenShow">
                        <div class="screen-item" v-for="(item, index) in screen" :key="item.value"
                        @click="onScreen(item.value)" :class="{active:index==isActive}">
                            {{item.label}}
                        </div>
                    </div>
                </transition>

                <van-cell-group>
                    <van-switch-cell v-model="paramsScreen.checked" @input="onSearch" active-color="#ff611b" title="仅显示优惠券商品" />
                </van-cell-group>
            </div>
        </div>

        <van-list
            class="list-wrap"
            v-model="dataLoading"
            :finished="finished"
            finished-text="已到达最底"
            @load="onLoad"
            >
            <van-cell v-for="(item, index) in list" :key="index">
                <van-row type="flex">
                    <van-col class="product-img">
                        <img :src="item.pict_url" @click="link(item.num_iid)"/>
                        <div class="discounts" v-if="item.coupon_info">
                            <span>{{item.coupon_info}}</span>
                        </div>
                    </van-col>
                    <van-col offset="1" class="product-content">
                        <div>
                            <div class="product-tit" @click="link(item.num_iid)">
                                {{item.title}}
                            </div>
                            <van-row class="product-info" type="flex" justify="space-between">
                                <van-col>{{item.shop_title}}</van-col>
                                <van-col>月销：{{item.tk_total_sales}}</van-col>
                            </van-row>
                        </div>
                        <div class="item-foot">
                            <van-row type="flex" justify="space-between">
                                <van-col>
                                    <van-row type="flex">
                                        <van-col style="margin-right: .25rem;">
                                            <div class="num">11.36%</div>
                                            比率
                                        </van-col>
                                        <van-col style="margin-right: .1rem;">
                                            <div class="num price">￥30.50</div>
                                            约赚
                                        </van-col>
                                    </van-row>
                                </van-col>
                                <!-- <van-col>
                                    <van-button round type="danger" size="small" @click="copyCoupon">复制口令</van-button>
                                </van-col> -->
                            </van-row>
                        </div>
                    </van-col>
                </van-row>
            </van-cell>    
        </van-list>
        
        <div class="mask" v-if="screenShow"></div>
        <div class="loading" v-if="loading">
            <van-loading type="spinner" color="white" />
        </div>
    </div>

    <!-- 引入组件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>

    <script>
        new Vue({
            el: '#productList',
            data() {
                return {
                    keywords: '女装',
                    isNavActive: -1,
                    isActive: 0,
                    list: [],
                    loading: false,
                    dataLoading: false,
                    finished: false,
                    screenShow: false,
                    flag: false,
                    paramsScreen: {
                        checked: false,
                        page_no: 1,
                    },
                    navScreen: [
                        {
                            label: '天猫',
                            value: 0
                        },{
                            label: '全球购',
                            value: 1
                        }
                       
                    ],
                    screen: [
                        {
                            label: '全部',
                            value: 0
                        },{
                            label: '综合排序',
                            value: 1
                        },{
                            label: '销量优先',
                            value: 2
                        },{
                            label: '价格排序',
                            value: 3
                        },{
                            label: '比率排序',
                            value: 4
                        }
                    ]
                }
            },
            mounted() {
                window.addEventListener('resize', this.handleResize, true);
                window.addEventListener('onscroll', this.handleScroll, true);
            },
            created() {
                setTimeout(() => {
                    this.handleResize();
                    this.handleScroll();
                }, 100);
            },
            methods: {
                handleScroll() {
                    window.onscroll = (() => {
                        let scrollTop = document.body.scrollTop;
                        let windowHeight = document.body.clientHeight;
                        let scrollHeight = document.body.scrollHeight;
                        if(scrollTop + windowHeight == scrollHeight){
                            this.flag = true;
                            this.paramsScreen.page_no++;
                            this.onLoad(this.paramsScreen);
                        } 
                    });
                },
                handleResize() {
                    let headWrap = document.getElementsByClassName("head-wrap")[0];
                    let listWrap = document.getElementsByClassName("list-wrap")[0];
                    if (headWrap) {
                        listWrap.style.marginTop = headWrap.clientHeight + 'px';
                    }
                },
                link(id) {
                    let userId = this.getQueryString("user_id");
                    window.location.href = './productDetail.html?user_id='+ userId +'&item_id=' + id;
                },
                onLoad(params = {}) {
                    let _this = this;
                    _this.loading = true;

                    /*
                        查询条件
                        page_no：翻页，可补充，默认是1
                        page_size：每页多少条数据，可不传，默认20
                        q：关键词
                        sort_type：0综合、1销量优先、2价格、3佣金
                        is_overseas：true海外
                        is_tmall：true天猫
                        has_coupon：有优惠
                    */
                    $.ajax('http://search.jifan.dxanm.com/shop/index', {
                        data: {
                            page_no: params.page_no,
                            q: params.q || _this.keywords,
                            sort_type: params.sort_type || 0,
                            is_overseas: params.is_overseas || false,
                            is_tmall: params.is_tmall || false
                        },
                        dataType: 'jsonp',
                        crossDomain: true,
                        success: function (res) {
                            if (res.data.result_list && res.data.result_list.map_data.length > 0) {
                                if (_this.flag) {
                                    _this.list.push(res.data.result_list.map_data);
                                } else {
                                    _this.list = res.data.result_list.map_data;
                                }
                                // 加载状态结束
                                _this.dataLoading = false;
                                _this.loading = false;


                                // 再去请求是否有数据
                                if (_this.list.length >= res.data.result_list.map_data.length) {
                                    _this.finished = true;
                                }
                            }
                        }
                    })    
                },
                onScreen(value){
                    this.isActive = value;
                    this.paramsScreen.sort_type = value;
                    this.flag = false;
                    this.onLoad(this.paramsScreen);
                    setTimeout(() => {
                        this.screenShow = false;
                    }, 100);
                },
                onNavScreen(value) {
                    this.isNavActive = value;
                    if (value == 0) {
                        this.paramsScreen.is_overseas = true;
                        this.paramsScreen.is_tmall = false;
                    } else {
                        this.paramsScreen.is_overseas = false;
                        this.paramsScreen.is_tmall = true;
                    }
                    this.flag = false;    
                    this.onLoad(this.paramsScreen);
                },
                onSearch() {
                    this.flag = false;
                    this.onLoad(this.paramsScreen);
                },
                copyCoupon() {
                    // http://coupon.dxanm.com/coupon/get?user_id=18&item_id=37054236352&callback=jsonp
                },
                getQueryString(name) {
                    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                    let r = window.location.search.substr(1).match(reg);
                    if(r != null) {
                        return unescape(r[2]);
                    }
                    return null;
                }
            }
        })
    </script>
</body>

</html>